Change the open URL link to a button #17347

patch-malone · 2019-02-01T07:25:48Z

When trying to visit a page that isn't available as HTTPS a user may be shown a cancel page where they can either cancel the insecure visit or choose to override the restriction. The link of the URL shown at the bottom of that page misleadingly goes to an internal extension URL. Instead, change the actionable item into a button with a clear label describing the action.

Screenshots

Before

After

Notice the button at the bottom of the page

pipboy96 · 2019-02-01T08:01:59Z

Needs some work with CSS styling, but the idea is good.

patch-malone · 2019-02-01T08:27:56Z

Is there another button that I can reference for the styling? I looked around for button-like UI elements but couldn't find anything so I made the button look similar to the S logo at the top of the page.

pipboy96 · 2019-02-01T08:42:57Z

@patch-malone Wait a couple of minutes, I will write a style.

chromium/pages/cancel/index.html

chromium/pages/cancel/style.css

chromium/pages/cancel/index.html

pipboy96 · 2019-02-01T17:59:47Z

I have another idea. To make the page seem more like an error page, the bg should be yellow, possibly striped too. HTTPS Everywhere logo needs to be fixed to remove white background though.

pipboy96 · 2019-02-01T18:22:23Z

You can apply these styles to html:

background: repeating-linear-gradient(45deg, #ffdc00, #ffdc00 10px, #e5c600 10px, #e5c600 20px);
min-height: 100vh; /* this fixes weird looping */

pipboy96 · 2019-02-01T18:23:00Z

To temporarily remove the white bg from the image, you can set mix-blend-mode to darken on it,

pipboy96 · 2019-02-02T09:46:01Z

Maybe instead of closing the page you should make it go back to the page that had unencrypted link and if that's impossible (page was opened directly) you should simply hide the button?

patch-malone · 2019-02-03T19:32:10Z

Tab history isn't accessible. history.back() doesn't work correctly in this instance and document.referrer is blank. I'll remove the button. It can be added in a separate PR.

patch-malone · 2019-02-15T16:52:25Z

@Bisaloo Are any other changes required before merging?

Bisaloo · 2019-02-15T17:00:46Z

Let's ask @zoracon. I know some people at the EFF are usually involved in UI PR review but I'll let @zoracon ping them if necessary.

zoracon · 2019-02-15T17:58:07Z

@Bisaloo I can pull this down and review. The interstitial page does admittedly need work. We have UX dev plans in the making #16669, but I see no harm with looking this change over to see how it plays out.

zoracon

Made a small change to language I realized was outdated in the interstitial, but otherwise looks good to go and will merge soon

Bisaloo added the ui label Feb 1, 2019